<template>
  <div id="app">
    <audio id="myaudio" ref="audio" @timeupdate="musicTimeUpdate" @canplay="musicCanPlay" @playing="musicOnPlaying" @ended="musicEnded" @waiting="musicOnWaiting" @pause="musicOnPause" @loadstart="loadStart"></audio>

    <v-h :index="2"></v-h>
    <!-- 侧边栏列表 -->
    <side-bar :info="info"></side-bar>
    <!-- 底部显示的菜单列表 -->
    <!-- <menu-list></menu-list> -->
    <!-- 底部显示的浮层页  音乐列表 -->
    <music-list></music-list>
    <!-- 底部固定页 -->
    <bottom-bar></bottom-bar>
    <!-- 我的音乐  首页 -->
    <my-music></my-music>
    <!-- 音乐播放详情  显示cd页 -->
    <music-detail></music-detail>
    <!-- 歌单详情页 -->
    <song-sheet></song-sheet>
  </div>
</template>

<script>
  import vh from './components/header/header.vue'
  import sidebar from './components/sidebar/sidebar.vue'
  import bottombar from './components/bottombar/bottombar.vue'
  import mymusic from './components/mymusic/mymusic.vue'
  // import menulist from './components/menulist/menulist.vue'
  import musiclist from './components/musiclist/musiclist.vue'
  import musicdetail from './components/musicdetail/musicdetail.vue'
  import songsheet from './components/songsheet/songsheet.vue'


export default {
  name: 'App',
  data(){
    return {
      info:{}
    }
  },
  components:{
    'v-h':vh,
    'side-bar': sidebar,
    'bottom-bar': bottombar,
    'my-music': mymusic,
    // 'menu-list': menulist,
    'music-list': musiclist,
    'music-detail': musicdetail,
    'song-sheet': songsheet
  },
  methods:{
    // 音频播放结束事件
    musicEnded(){

    },
    // 音乐播放时间更新事件
    musicTimeUpdate () {

    },
    // 可以播放事件
    musicCanPlay () {

    },
    // 音乐处于播放状态
    musicOnPlaying () {

    },
    // 音乐处于watting状态
    musicOnWaiting () {

    },
    // 音乐处于暂停状态
    musicOnPause () {

    },
    // 音乐加载
    loadStart () {

    },
  },
  created(){
    let LocalApi = 'static/data.json';
    console.log("xcxxxxxxxxxxxxx")
    console.log(this.$http.get())
    this.$http.get(LocalApi).then((res) => {

      // data.user的信息赋值给info  再通过组件的数据传递传给sideBar
      this.info = res.data.user;
      this.$store.dispatch('set_MusicAllList',res.data.music);
      this.$store.dispatch('set_AllInfo',res.data);
      this.$refs.audio.setAttribute('src',this.$store.getters.getCurrentMusic.url);
      this.$store.dispatch('set_AudioElement',this.$refs.audio);

      console.log("res...")
      console.log(this.$store.getters.getMusicAllList);
    }).catch((res) => {
      console.log(res);

    })
    console.log("yyyyyyyyyyyyyyyyyyy")
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "/static/font-icon/style.css"
  @import "common/stylus/border-1px/index.styl"
  @import "common/stylus/global.styl"
  body,html
    margin:0
    padding:0
    box-sizing:border-box
    background:#f0f0f0f0
    user-select:none
    -webkit-tap-highlight-color: transparent

  #app
    font-family: 'Avenir', Helvetica, Arial, sans-serif
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    color: #2c3e50
</style>
